.x-field {
	&__label {
		flex: none;
		width: $field-label-width;

		&--center {
			text-align: center;
		}

		&--right {
			text-align: right;
		}
	}

	&__body {
		display: flex;
		align-items: center;
	}

	&__control {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0; // for flex-shrink in field__button
		margin: 0;
		padding: 0;
		color: $field-input-text-color;
		text-align: left;
		background-color: transparent;
		border: 0;
		resize: none;
		font-size: inherit;
		height: $cell-line-height;
		line-height: $cell-line-height;

		&::placeholder {
			color: $field-placeholder-text-color;
		}

		&:disabled {
			color: $field-input-disabled-text-color;
			-webkit-text-fill-color: $field-input-disabled-text-color; // fix disabled color in iOS
			background-color: transparent;
			opacity: 1;
		}

		&--center {
			text-align: center;
		}

		&--right {
			text-align: right;
		}

		// for ios wechat
		&[type='date'],
		&[type='time'],
		&[type='datetime-local'] {
			min-height: $cell-line-height;
		}

		// for safari
		&[type='search'] {
			-webkit-appearance: none;
		}
	}

	&__clear,
	&__icon,
	&__button,
	&__right-icon {
		flex-shrink: 0;
	}

	&__clear,
	&__right-icon {
		margin-right: -$padding-xs;
		padding: 0 $padding-xs;
		line-height: inherit;
	}

	&__clear {
		color: $field-clear-icon-color;
		font-size: $field-clear-icon-size;
		cursor: pointer;
	}

	&__left-icon .x-icon,
	&__right-icon .x-icon {
		display: block;
		min-width: 1em;
		font-size: $field-icon-size;
		line-height: inherit;
	}

	&__left-icon {
		margin-right: 5px;
	}

	&__right-icon {
		color: $field-right-icon-color;
	}

	&__button {
		padding-left: $padding-xs;
	}

	&__error-message {
		color: $field-error-message-color;
		font-size: $field-error-message-text-color;
		text-align: left;

		&--center {
			text-align: center;
		}

		&--right {
			text-align: right;
		}
	}

	&__word-limit {
		margin-top: $padding-base;
		color: $field-word-limit-color;
		font-size: $field-word-limit-font-size;
		line-height: $field-word-limit-line-height;
		text-align: right;
	}

	&--error {
		.x-field__control {
			&,
			&::placeholder {
				color: $field-input-error-text-color;
				-webkit-text-fill-color: $field-input-error-text-color;
			}
		}
	}

	&--min-height {
		.x-field__control {
			min-height: $field-text-area-min-height;
		}
	}
}
